<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"></link>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"></link>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div class="row" id="index">
    <div class="col-lg-6">
        <form action="list.html" method="post" class="form-inline" id="searchForm">
            <div class="form-group">
                <label>账号类型</label>
                <select class="form-control" v-model="accountSearch.typeId">
                    <option>请选择</option>
                    <option v-for="item in typeList" v-bind:value="item.id">{{item.name}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>公众号/名称</label>
                <input type="text" class="form-control" placeholder="公众号或名称"  v-model="accountSearch.keywords">
            </div>
            <div class="form-group span6">
                <label>创建时间</label>
                <input class="form-control" size="10" type="text" id="startTime"  v-model="accountSearch.start"> -
                <input class="form-control" size="10" type="text" id="endTime"  v-model="accountSearch.end">
            </div>
            <div class="form-group">
                <button type="button" class="btn"  @click="getList(1)">查询</button> <button type="button" class="btn btn-success" onclick="window.location.href='edit.html'">+添加</button>
            </div>
        </form>
        <table class="table table-striped table-bordered" style="margin-top:20px">
            <tr>
                <td>ID</td>
                <td>名称</td>
                <td>公众号</td>
                <td>类型</td>
                <td>创建时间</td>
                <td>认证</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in accountList.list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.account}}</td>
                <td>{{item.type.name}}</td>
                <td>{{item.createdTime}}</td>
                <!--<td>{{item.status==1?'已认证':'未认证'}}</td>-->
                <td v-if="item.status==1">已认证</td>
                <td v-else>未认证</td>
                <td><a :href="'edit.html?id='+item.id">修改</a> <a :href="'delete?id='+item.id">删除</a></td>
            </tr>
        </table>
        <ul class="pagination">
            <!--不可点击的样式-->
            <li><a href="#" @click="getList(1)">首页</a></li>
            <li><a href="#" @click="getList(accountList.prePage)">上一页</a></li>
            <li v-for="pn in accountList.navigatepageNums" :class="{active:pn==accountList.pageNum}"><a href="#" @click="getList(pn)">{{pn}}</a></li>
            <li><a href="#" @click="getList(accountList.nextPage)">下一页</a></li>
            <li><a href="#" @click="getList(accountList.pages)">末页</a></li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        $('#startTime').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            minView: 2
        });
        $('#endTime').datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            minView: 2
        });
        $('#startTime').datetimepicker().on('hide', function (ev) {
            var value = $("#startTime").val();
            vm.accountSearch.start = value;
        });
        $('#endTime').datetimepicker().on('hide', function (ev) {
            var value = $("#endTime").val();
            vm.accountSearch.start = value;
        });
    })
</script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>